<style lang="less" xmlns="http://www.w3.org/1999/html">
  @import '../../styles/common.less';
</style>

<template>
  <div style="padding-top: 20px;">
    <Form ref="activityData" :model="activityData" :rules="ruleValidate" :label-width="110">
      <div class="ivu-row" style="border-bottom: 1px #ccc solid; margin-bottom: 20px;">
        <div style="float:left;width: 45%; padding-right: 20px;border-right: 1px #ccc solid">
          <FormItem label="活动名称：" prop="activityName">
            <Input v-model="activityData.activityName" placeholder="请输入活动名称"></Input>
          </FormItem>
          <FormItem label="活动副标题：">
            <Input v-model="activityData.activityOTitle" placeholder="请输入活动副标题"></Input>
          </FormItem>
          <FormItem label="活动分类：" prop="activityType">
            <Select v-model="activityData.activityType" style="width:200px">
              <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem label="活动属性：" prop="activityAttr">
            <Select v-model="activityData.activityAttr" style="width:200px">
              <Option v-for="item in descList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem label="活动地点：" prop="activityAddress">
            <Input v-model="activityData.activityAddress" placeholder="请输入活动地点"></Input>
          </FormItem>

          <FormItem label="活动时间：">
            <DatePicker type="datetime" placeholder="请选择时间" format="yyyy-MM-dd HH:mm:ss" :start-date="new Date()" v-model="activityData.activityTime" style="width: 200px"></DatePicker>
          </FormItem>
        </div>
        <!--<div style="float:left;width: 30%; padding-right: 20px; padding-left:20px;border-right: 1px #ccc solid">
          <FormItem label="活动对象：">
            <Input v-model="projectData.projectObj" placeholder="请输入招生对象"></Input>
          </FormItem>
          <FormItem label="报名条件：">
            <Input v-model="projectData.enrollCondition" placeholder="请输入报名条件"></Input>
          </FormItem>
          <FormItem label="活动人数：">
            <Input v-model="projectData.enrollPersons" placeholder="请输入招生人数"></Input>
          </FormItem>
          <FormItem label="报名方法：">
            <Input v-model="projectData.enrollMethod" placeholder="请输入报名方法"></Input>
          </FormItem>
          <FormItem label="活动安排：">
            <Input v-model="projectData.projectArrange" placeholder="请输入教学安排"></Input>
          </FormItem>
          <FormItem label="费用标准：">
            <Input v-model="projectData.projectFee" placeholder="请输入学费标准"></Input>
          </FormItem>
        </div>-->
        <div style="float:left;width: 45%; padding-left: 20px;">
          <!--<FormItem label="证书颁发：">
            <Input v-model="projectData.certificate" placeholder="请输入证书颁发"></Input>
          </FormItem>-->
          <FormItem label="活动人数：">
            <Input v-model="activityData.activityPersons" placeholder="请输入活动人数"></Input>
          </FormItem>
          <FormItem label="缩略图：" prop="files">
            <Row type="flex" justify="center" align="middle" class="height-100">
              <Upload
                action="/school/fileUpload/"
                :on-format-error="handleFormatError" :on-success="handleSuccess" :on-remove="handleRemove">
                <span>选择文件上传&nbsp;&nbsp;</span>
                <Button type="ghost" icon="ios-cloud-upload-outline">上传文件</Button>
              </Upload>
            </Row>
          </FormItem>

          <FormItem label="开启状态：">
            <RadioGroup v-model="activityData.activityState">
              <Radio label="开启"></Radio>
              <Radio label="关闭"></Radio>
            </RadioGroup>
          </FormItem>
          <!--<FormItem label="附件2" prop="files">
            <Row type="flex" justify="center" align="middle" class="height-100">
              <Upload
                action="/school/fileUpload/"
                :on-format-error="handleFormatError1" :on-success="handleSuccess1" :on-remove="handleRemove1">
                <span>选择文件上传&nbsp;&nbsp;</span>
                <Button type="ghost" icon="ios-cloud-upload-outline">上传文件</Button>
              </Upload>
            </Row>
          </FormItem>
          <FormItem label="活动时长：">
            <RadioGroup v-model="projectData.timeType">
              <Radio label="长期"></Radio>
              <Radio label="短期"></Radio>
            </RadioGroup>
          </FormItem>-->
        </div>
      </div>
      <!--<FormItem label="项目类型简介">-->
      <!--<Input v-model="projectData.simpDesc" placeholder="请输入项目类型简介"></Input>-->
      <!--</FormItem>-->
      <!--<FormItem label="核心价值">-->
      <!--<Input v-model="projectData.mainPrice" placeholder="请输入核心价值"></Input>-->
      <!--</FormItem>-->
      <!--<FormItem label="课程设置简介">-->
      <!--<Input v-model="projectData.projectSetDesc" placeholder="请输入课程设置简介"></Input>-->
      <!--</FormItem>-->


      <FormItem label="活动描述：">
        <UE :defaultMsg=defaultMsg :config=config :id=ue1 ref="ue"></UE>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="handleSubmit('activityData')">提交</Button>
        <Button type="ghost" @click="handleReset('activityData')">清空</Button>
      </FormItem>

    </Form>
  </div>
</template>

<script>
  import moment from 'moment'
  import UE from '../ue/ue.vue';

  export default {
    components: {UE},
    name: "subjectmod",
    data(){
      return{
        activityData:{
          activityName:'',
          activityOTitle:'',
          activityType:'',
          activityAttr:'',
          activityAddress:'',
          activityTime:new Date(),
          activityPersons:'',
          activityImg:'',
          activityState:'开启',
          activityContext:'',
          id:0
        },
        ruleValidate:{
          activityName:[
            {required: true,message:'请输入活动名称',trigger:'blur'}
          ],
          activityType:[
            {required: true,message:'请输入活动分类',trigger:'blur'}
          ],
          activityAttr:[
            {required: true,message:'请输入活动属性',trigger:'blur'}
          ]
        },
        typeList:[
          {
            value:'论坛',
            label:'论坛'
          },{
            value:'参访',
            label:'参访'
          },{
            value:'交流',
            label:'交流'
          },{
            value:'游学',
            label:'游学'
          },
        ],
        descList:[
          {
            value:'公开',
            label:'公开'
          },{
            value:'定制',
            label:'定制'
          }
        ],
        defaultMsg: '',
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 350
        },
        ue1: "ue1", // 不同编辑器必须不同的id
      }
    },
    methods:{
      handleSubmit(name){
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.activityData.activityContext = this.$refs.ue.getUEContent();
            let dataArr = this.activityData;

            console.log(dataArr);
            if(this.activityData.id > 0){
              this.$http.post('/school/updActivity', dataArr).then(res => {
                console.log(res);
                this.$Message.success('更新成功!');
                this.handleReset(name);
              });
            }else {
              this.$http.post('/school/addActivity', dataArr).then(res => {
                console.log(res);
                this.$Message.success('更新成功!');
                this.handleReset(name);
              });
            }
          }
        })
      },
      handleFormatError (file) {
        this.$Notice.warning({
          title: '文件格式不正确',
          desc: '文件 ' + file.name + ' 格式不正确，请选择文件。'
        });
      },
      handleSuccess(response, file, fileList){
        console.log(response);
        this.activityData.activityImg = response.data[0];
      },
      handleRemove(file, fileList){
        this.activityData.activityImg = '';
      },
      handleReset (name) {
        this.$refs[name].resetFields();
      }
    },
    mounted () {
      console.log(this.$route.query.id);
      if(this.$route.query.id == undefined) return;
      this.$http.get('/school/getbActivityById?id='+this.$route.query.id).then(res=>{
        console.log(res);
        var dt = res.data.data;
        this.activityData.id = dt.id;
        this.activityData.activityName = dt.activityName;
        this.activityData.activityOTitle = dt.activityOTitle;
        this.activityData.activityType = dt.activityType;
        this.activityData.activityAttr = dt.activityAttr;
        this.activityData.activityAddress = dt.activityAddress;
        this.activityData.activityTime = moment(dt.activityTime).format('YYYY-MM-DD HH:mm:ss');
        this.activityData.activityPersons = dt.activityPersons;
        this.activityData.activityImg = dt.activityImg;
        this.activityData.activityState = dt.activityState;
        this.activityData.activityContext = dt.activityContext;


        this.$refs.ue.setUEContent(dt.activityContext);
      });
    },
    created () {

    }
  }
</script>

<style scoped>
  .ql-container{height: 200px !important;}
</style>
